<template>
	<view class="">
		<view class="head_img" @tap='toArticle(top.id)'>
			<image class="face-img" :src="top.cover" mode=""></image>
			<view class="title">
				{{top.title}}
			</view>
		</view>
		<view class="qydtcon">
			<view class="one" v-for="(item,index) in listData" :key='index' @tap='toArticle(item.id)'>
				<image :src="item.cover"></image>
				<view class="con">
					<view class="title">{{item.title}}</view>
					<!-- <view class="content">{{item.introduce}}</view> -->
					<view class="date">
						<view class="name">
							{{item.author}}
						</view>
						<!-- <view class="time">
							{{item.time}}
						</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				listData:[],
				top:[],
				tppe:0,
				sys:0
			}
		},
		onLoad(options) {
			console.log(options)
			this.type = options.type
			this.sys = options.sys
			this.getlist()
		},
		methods:{
			getlist(){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getNewsList')({
					type:this.type,
					sys:this.sys
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						this.listData = res.data.list
						this.top = res.data.top
						
					}
					uni.hideLoading()
				})
			},
			
			toArticle(id){
				uni.navigateTo({
					url:`/pages/news/article?id=${id}`
				})
			},
			
			
			
			
			
		}
	}
</script>

<style>
	.qydtcon{
		background-color: #FFFFFF;
		padding: 20rpx 0 20rpx 13rpx;
	}
	
	.head_img{
		height: 400rpx;
		position: relative;
		padding-left: -13rpx;
	}
	
	.face-img{
		width: 100%;
		height: 400rpx;
	}
	
	.head_img .title{
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		color: #FFFFFF;
	}
	
	
	.qydtcon .one{
		display: flex;
		padding: 13rpx 13rpx 13rpx 0rpx;
		border-bottom: 1rpx solid #a6a6a6;
	}
	
	.qydtcon .one image{
		width: 185rpx;
		margin-right: 20rpx;
		height: 135rpx;
	}
	
	.qydtcon .one .con{
		width: 500rpx;
		position: relative;
	}
	
	.qydtcon .one .con .title{
		font-size: 28rpx;
		margin-top: 5rpx;
	}
	
	.qydtcon .one .con .date{
		display: flex;
		color: #999999;
		font-size: 26rpx;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
	}
	
	.qydtcon .one .con .date .name{
		margin-right: 240rpx;
	}
</style>
